{extend name='layui/base'/}

{block name="style"}
<style>

</style>
{/block}
{block name="main"}
<div>
    <button class="layui-btn" onclick="showTip(4)">对话框</button>
    <button class="layui-btn" onclick="showTip(21)">iframe Open1</button>
    <button class="layui-btn" onclick="showTip(1)">Type1</button>
    <button class="layui-btn" onclick="showTip(2)">Type2</button>
    <button class="layui-btn" onclick="showTip(3)">Type3</button>

</div>


{/block}
{block name="layui_script_extension"}

{/block}
{block name="js_extension"}
<script>
  function onLayuiReady() {
    console.log("123")
  }

  function showTip($type) {
    switch ($type) {
      case 1:
//
        layer.open({
          title: '在线调试'
          , content: '可以填写任意的layer代码'
        });
        break;
      case 2:
//                如果是页面层
        layer.open({
          type: 1,
          content: '传入任意的文本或html' //这里content是一个普通的String
        });
//               如果是页面层
        break;
      case 3:
//                如果是页面层
        layer.open({
          type: 1,
          content: $('#dialog') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
        });
//               如果是页面层
        break;
      case 4:
//                如果是页面层
        //eg2
        layer.confirm('是否确定', function (index) {
          //do something
          layer.close(index);
        }, function (index) {
          layer.close(index);
        });
        break;


      case 21:
//       //iframe层
        layer.open({
          type: 2,
          title: 'layer mobile页',
          shadeClose: true,
          shade: 0.8,
          area: ['80%', '90%'],
          content: 'http://www.baidu.com' //iframe的url
        });
        break;
    }
  }
</script>
{/block}
{block name="out_body_extension"}
<div id="dialog">
    123asjdfljsdfkjf
    <textarea style="width: 100px">

    </textarea>
</div>
{/block}
